<template>
  <div class="smart-manageindex">

    <el-row class="tac smart-bar">
      <el-col :span="4">
        <el-menu
          default-active="2"
          class="el-menu-vertical-demo"
          @open="handleOpen"
          @close="handleClose"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b">
          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>厂商信息管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="1-1">厂商注册审核</el-menu-item>
              <el-menu-item index="1-2">厂商信息管理</el-menu-item>
              <el-menu-item index="1-3">注册厂商统计</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="2">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>前端设备管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="2-1">前端设备审核</el-menu-item>
              <el-menu-item index="2-2">前端设备管理</el-menu-item>
              <el-menu-item index="2-3">前端设备统计</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="3">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>移动监控管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="3-1">移动监控审核</el-menu-item>
              <el-menu-item index="3-2">移动监控管理</el-menu-item>
              <el-menu-item index="3-3">移动监控统计</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="4">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>移动监控管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="3-1">移动监控审核</el-menu-item>
              <el-menu-item index="3-2">移动监控管理</el-menu-item>
              <el-menu-item index="3-3">移动监控统计</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="3">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>移动监控管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="3-1">移动监控审核</el-menu-item>
              <el-menu-item index="3-2">移动监控管理</el-menu-item>
              <el-menu-item index="3-3">移动监控统计</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="3">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>移动监控管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="3-1">移动监控审核</el-menu-item>
              <el-menu-item index="3-2">移动监控管理</el-menu-item>
              <el-menu-item index="3-3">移动监控统计</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="3">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>移动监控管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="3-1">移动监控审核</el-menu-item>
              <el-menu-item index="3-2">移动监控管理</el-menu-item>
              <el-menu-item index="3-3">移动监控统计</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="3">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>移动监控管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="3-1">移动监控审核</el-menu-item>
              <el-menu-item index="3-2">移动监控管理</el-menu-item>
              <el-menu-item index="3-3">移动监控统计</el-menu-item>
            </el-menu-item-group>
          </el-submenu>


        </el-menu>
      </el-col>

      <el-col :span="20">
        <router-view class="smart-indexmain"/>
      </el-col>
    </el-row>


  </div>
</template>

<script>
export default {
  methods: {
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      }
    }
}
</script>

<style scoped lang='scss'>
  .smart-manageindex {
    width: 100%;
    overflow-x: hidden;
    // display: flex;

    .smart-indexmain {
      // flex: 1;
      overflow-x: hidden;
    }
  }
</style>
